<template>
  <el-menu
    class="sibebar"
    background-color="#545c64"
    text-color="#fff"
    router
    :default-active="active"
    active-text-color="#ffd04b">
    <div class="logo">里由美术馆</div>
    <div class="menu-list">
      <template v-for="menu in menus">
        <el-menu-item
          v-if="!menu.children"
          :key="menu.name"
          style="min-width: 180px"
          :index="menu.name"
          :route="{ name: menu.name }">
          {{menu.label}}
        </el-menu-item>
        <el-submenu
          v-else
          :key="menu.name"
          :index="menu.name">
          <template slot="title">{{menu.label}}</template>
          <el-menu-item
            style="min-width: 180px"
            v-for="submenu in menu.children"
            :key="submenu.name"
            :index="submenu.name"
            :route="{ name: submenu.name }">
            {{submenu.label}}
          </el-menu-item>
        </el-submenu>
      </template>
    </div>
  </el-menu>
</template>
<script>
import menus from './config';

const educationAuth = ['dashboard', 'user', 'course', 'works', 'base-config'];
const financeAuth = ['dashboard', 'user', 'order'];

export default {
  data() {
    return {
      active: 'dashboard',
    };
  },
  watch: {
    $route: {
      handler(val) {
        const { menuItem } = val.meta;
        this.active = menuItem || val.name;
      },
      immediate: true,
    },
  },
  computed: {
    menus() {
      const roleType = localStorage.getItem('roleType');
      if (roleType) {
        if (Number(roleType) === 2) {
          return menus.filter((item) => {
            const { name } = item;
            return educationAuth.includes(name);
          });
        } if (Number(roleType) === 3) {
          return menus.filter((item) => {
            const { name } = item;
            return financeAuth.includes(name);
          });
        }
        return menus;
      }
      return menus;
    },
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
  .sibebar {
    height: 100vh;
    width: 180px;
    .logo {
      color: #FFF;
      height: 60px;
      text-align: center;
      line-height: 60px;
      font-size: 20px;
    }
    .menu-list {
      height: calc(100vh - 60px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
    }
  }
</style>
